<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> 
    <script>
        // 窗口宽度 window.innerWidth
        // HTML元素 document.documentElrment
        // 设置font-size  style.fontsize

        // 匿名函数 没有给名字 会立马执行函数
        // (function(){
        //     // 动态设置一下 HTML的字体大小
        //     // console(' 动态设置一下 HTML的字体大小')
        //     let winWidth=window.innerWidth,
        //     oHTML=document.documentElement;
        //     console.log(winWidth,oHTML);
        //                           // 字符串类型 拼接字符串
        //     oHTML.style.fontSize='${winWidth/10}px';
            // console.log(winWidth);
        // })()
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        body{
            /* --变量  最新css语法*/
            --tm-PRICE-TEXT-COLOR: #ee0a36;
        }
        /* html{
            font-size: 37.5px;
        } */
        /* .row{
            display: flex;
        }
        .col{
            background-color: pink;          
        }
        .col:first-child{
            background-color: green;            
        }
        .col-1{ width: 1rem;}
        .col-2{ width: 2rem;}
        .col-3{ width: 3rem;}
        .col-4{ width: 4rem;}
        .col-5{ width:5rem;}
        .col-6{ width: 6rem;}
        .col-7{width: 7rem;}
        .col-8{ width: 8rem;}
        .col-9{ width:9rem;}*/
        .page__hd img{
            width: 10rem;
        }
        .ul.goods{
            padding: 0.1333rem;
        }
        .goods__item{
            display: table; 
        }
        .goods__item> .goods__figure,
        .goods__item> .goods__figcaption{
            display: table-cell;
            padding: 0.16rem 0;
            vertical-align: top;
            background-color: #fff;
        }
         .goods__figure{
            width: 2.4rem;
            height: 2.4rem;
         }
         .goods__figure> img{
             max-width: 100%;
         }
         .goods__item .goods__figcaption{
             width: 7.2rem;
             padding-left: 0.2rem;
             padding-right: 0.2rem;
             position: relative;
             
         }
         .goods__figcaption .goods__title a{
            color: #333;
            line-height: 1.25;
         }
         .goods__figcaption .goods__price{
             padding: 0.15rem 0 0.2rem;
         }
         .goods__figcaption .goods__price span,
         .goods__figcaption .goods__price strong,
         .goods__figcaption .goods__price small{
             /* 行内块级元素 */
            display: inline-block;
            /* 两个兄弟之间的对齐 */
             vertical-align: middle;
         }
         .goods__figcaption .goods__price span{
             font-size: 11px;            
             background-color:var( --tm-PRICE-TEXT-COLOR);
             /* 换成px rem*37.5 */
             border-radius: 0.026667rem;
             /* 上左下右 */
             padding: 0.26667rem 0.08rem 0.013333rem;
             color: #fff;
             font-weight: 700;
             margin-right: 0.0667rem;

         }
         .goods__figcaption .goods__price strong{           
             font-weight: 700;
             color: var( --tm-PRICE-TEXT-COLOR);
             font-size: 16px;
             margin-right: 0.16rem;
         }
         .goods__figcaption .goods__price small{
            
             font-weight: 700;
             color: var( --tm-PRICE-TEXT-COLOR);
             font-size: 12px;
         }
         .goods__type{
             color: #ff3600;
         }
         .goods__btn{
             /* 默认大小16px */
             font-size: 14px;
             position: absolute;
             width: 2.1333rem;
             height: 0.64rem;
             background-color: var( --tm-PRICE-TEXT-COLOR);
             text-align: center;
             color: #fff;
             font-weight: 700;
             bottom: 0.1333rem;
             right: 0.2rem;
             border-radius: 0.0267rem;
         }
    </style> 
</head>
<body>
    <!--<div class="row">
        <div class="col col-3">1</div>
        <div class="col col-7">2</div>
    </div>
    <div class="row">
        <div class="col col-4">4</div>
        <div class="col col-6">6</div>
    </div>  -->
    <div class="page">
         <div class="page__hd">
             <h2>
                 <img src="http://gw.alicdn.com/mt/TB1PNLZKXXXXXaTXXXXXXXXXXXX-750-481.jpg">
             </h2>        
         </div>
         <div class="page__bd">
             <ul class="goods">
                <!-- <li class="goods__item">
                    <a href="#" class="goods__figure">
                       <img src="https://placeimg.com/350/350/people/grayscale">
                    </a>
                    <div class="goods__figcaption">
                       <div class="goods__title">
                          <a href="#">Carter's1年式灰色长袖连体衣包脚爬服全棉鲸鱼男婴儿童装115G093</a>                         
                       </div>
                       <div class="goods__price">
                            <span>双十一价</span>
                            <strong>299.06</strong>
                            
                            <small>（满400减100）</small>  
                       </div>
                       <div class="goods__type">
                          1小时内热卖5885件
                       </div>
                       <a href="#" class="goods__btn">马上抢</a>
                    </div>
               </li> -->
             </ul>
         </div>
    </div>
    <script>
        const goods=[
            {
                "id":"64790015062",
               "pic":"https://gd2.alicdn.com/imgextra/i2/2211908299188/O1CN01h6hurp2Hk9jkmmn00_!!2211908299188.jpg" ,
              "title":"P1US  2021新款夏季女黑色炸街高腰短袖包臀显瘦a字修身半身短裙",
              "price":"¥349.00",
              "count":"1278"
            },
            {  
              "id":"15068433976",
               "pic":"https://img.alicdn.com/imgextra/i1/2978259752/O1CN01frCJ8I2LuT7n2Daf1_!!2978259752-0-picasso.jpg_430x430q90.jpg",
             "title":"Toread探路者男外套2021秋季新款保暖夹克休闲运动服宽松透气男装",
             "price":"266",
              "count":"256"
             },
             {
            "id":"629361117607",
            "pic":"https://img.alicdn.com/imgextra/i4/2432508853/O1CN01koelto2FGj1e1a5jG_!!0-item_pic.jpg_430x430q90.jpg",
            "title": "【天猫百亿补贴5000元】凯迪拉克 XT6 天猫特别版 指定车型 订金",
            "price":"5000",
            "count":"28"
        },
        {
            "id":"616602916456",
            "pic": "https://img.alicdn.com/bao/uploaded/i2/2200877014436/O1CN01iCkQ9K1idjXHp7h8g_!!2200877014436.jpg",
            "title": "Lancome/兰蔻法国口红菁纯哑光唇膏196胡萝卜色505苹果红润唇膏",
            "price": "239",
            "count": "2000+"
        }
        ]
        const goodsEle = document.querySelector('.goods')
        for(let i =0; i<goods.length;i++){
            let item=goods[i];
            goodsEle.innerHTML += `
            <li class="goods__item">
                    <a href="#" class="goods__figure">
                       <img src="${item.pic}">
                    </a>
                    <div class="goods__figcaption">
                       <div class="goods__title">
                          <a href="#">${item.title}</a>                         
                       </div>
                       <div class="goods__price">
                            <span>双十一价</span>
                            <strong>${item.price}</strong>
                            <!-- 在同一行中会比其他文本的字小一点  -->
                            <small>（满400减100）</small>  
                       </div>
                       <div class="goods__type">
                        ${item.count}
                       </div>
                       <a href="#" class="goods__btn">马上抢</a>
                    </div>
               </li>
            `
        }
    </script>
</body>
</html>